<template>
  <div class="pagenation">
    <div class="page">
      <select v-model="pageSize" @change="resetSearch">
        <option :value="7">7</option>
        <option :value="9">9</option>
        <option :value="11">11</option>
        <option :value="13">13</option>
      </select>
    </div>
    <div>
      <span @click="goLast()">＜</span>
    </div>
    <div v-for="item in computPageNo" :key="item">
      <button
        :class="{ currentPageNo: pageNum === item }"
        @click="typeof item === 'number' && changePageNo(item)"
      >
        {{ item }}
      </button>
    </div>
    <div>
      <span @click="goNext()">></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, computed, onMounted, defineExpose } from "vue";
const props = withDefaults(
  defineProps<{
    total: number;
    clickEvent: Function;
  }>(),
  {
    total: 0,
    clickEvent: () => {},
  }
);
const pageNum = ref<number>(1);
const pageSize = ref<number>(7);
onMounted(() => {
  props.clickEvent(pageNum.value, pageSize.value);
});
const goLast = () => {
  if (pageNum.value === 1) {
    return;
  }
  pageNum.value--;
  props.clickEvent(pageNum.value, pageSize.value);
};
const goNext = () => {
  const pageCount = Math.ceil(props.total / pageSize.value);
  if (pageNum.value === pageCount) {
    return;
  }
  pageNum.value++;
  props.clickEvent(pageNum.value, pageSize.value);
};
//获取当前页数
const computPageNo = computed(() => {
  const pageArr = [];
  const pageCount = Math.ceil(props.total / pageSize.value);
  if (pageCount <= 8) {
    for (let i = 1; i <= pageCount; i++) {
      pageArr.push(i);
    }
    return pageArr;
  }
  if (pageNum.value < 5) {
    for (let i = 1; i <= 6; i++) {
      pageArr.push(i);
    }
    pageArr.push("...");
    pageArr.push(pageCount);
  } else if (pageNum.value >= 5 && pageNum.value <= pageCount - 4) {
    pageArr.push(
      1,
      "...",
      pageNum.value - 1,
      pageNum.value,
      pageNum.value + 1,
      "...",
      pageCount
    );
  } else {
    pageArr.push(1);
    pageArr.push("...");
    for (let i = pageCount - 4; i <= pageCount; i++) {
      pageArr.push(i);
    }
  }
  return pageArr;
});
const changePageNo = (index: number) => {
  pageNum.value = index;
  props.clickEvent(pageNum.value, pageSize.value);
};
const resetSearch = () => {
  pageNum.value = 1;
  props.clickEvent(pageNum.value, pageSize.value);
};
defineExpose({ pageSize, pageNum });
</script>

<style lang="scss" scoped>
.pagenation {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  div {
    margin: 15px 5px;
    select {
      font-weight: 600;
      width: 65px;
      height: 25px;
      border: 2px solid black;
      padding: 0px 15px 0 10px;
      transition: all 0.5s;
      outline: none;
      //cursor: url("../assets/img/cur/mais.png"), default;
      option {
        border: 2px solid black;
        color: red;
      }
    }
    span {
      &:active {
        color: #fff;
      }
    }
    button {
      width: 45px;
      height: 25px;
      border: 2px solid black;
      outline: none;
      border-radius: 20px;
      background-color: transparent;
      font-weight: 600;
      //cursor: url("../assets/img/cur/mais.png"), default;
      &:hover {
        background-color: #fff;
        color: red;
      }
    }
  }
}
.currentPageNo {
  background-color: black !important;
  color: #fff;
}
@media screen and (max-width: 765px) {
  .pagenation {
    div {
      button {
        background-color: #fff;
        transition: all 0.3s;
        &:active {
          background-color: black;
          color: #fff;
        }
      }
    }
  }
}
</style>
